import type { ProFormInstance } from "@ant-design/pro-components";
import {
  ProForm,
  ProFormDatePicker,
  ProFormText,
} from "@ant-design/pro-components";
import { Button, Table, message } from "antd";
import dayjs from "dayjs";
import { FC, useEffect, useRef } from "react";

import { demo } from "./../mst/demo";
import { form } from "../mst/Form";
import { observer } from "mobx-react";
import { useNavigate } from "react-router-dom";

// console.log(demo);

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

const FormDemo: FC = () => {
  const formRef = useRef<ProFormInstance>();
  const onFill = () => {
    formRef?.current?.setFieldsValue({
      name: demo.name,
      company: demo.company,
    });
  };

  const router = useNavigate();

  const getCompanyName = () => {
    message.info(`公司名称为 "${formRef?.current?.getFieldValue("company")}"`);
  };

  // const dataSource = [
  //   {
  //     key: "1",
  //     name: "胡彦斌",
  //     age: 32,
  //     address: "西湖区湖底公园1号",
  //   },
  //   {
  //     key: "2",
  //     name: "胡彦祖",
  //     age: 42,
  //     address: "西湖区湖底公园1号",
  //   },
  // ];
  const dataSource = JSON.parse(form.data);

  const columns = [
    {
      title: "姓名",
      key: "title",
      dataIndex: "title",
    },
    {
      title: "内容",
      key: "decs",
      dataIndex: "decs",
    },
    {
      title: "时间",
      key: "created_at",
      dataIndex: "created_at",
    },
  ];

  // useEffect(() => {
  //   console.log(JSON.parse(form.data));
  // }, []);
  return (
    <div>
      {" "}
      <ProForm
        title="新建表单"
        formRef={formRef}
        submitter={{
          render: (props, doms) => {
            return [
              ...doms,
              <Button htmlType="button" onClick={onFill} key="edit">
                一键填写
              </Button>,
              <Button htmlType="button" onClick={getCompanyName} key="read">
                读取公司
              </Button>,
            ];
          },
        }}
        onFinish={async (values) => {
          await waitTime(2000);
          console.log(values);
          demo.changeProps(values);
          message.success("提交成功");
          return true;
        }}
      >
        <ProFormText
          width="md"
          name="name"
          label="签约客户名称"
          tooltip="最长为 24 位"
          placeholder="请输入名称"
        />

        <ProFormText
          width="md"
          name="company"
          label="我方公司名称"
          placeholder="请输入名称"
        />
        <ProFormDatePicker name="date" initialValue={dayjs()} />
      </ProForm>
      <Table
        dataSource={dataSource}
        columns={columns}
        style={{ marginTop: "40px" }}
        rowKey={"id"}
      />
      <Button
        danger
        onClick={() => {
          router("/mstdemo");
        }}
      >
        去可编辑表格
      </Button>
    </div>
  );
};

export default observer(FormDemo);
